<template>
    <div class="wrapper">
      <h1 class="title">{{ examTitle }}</h1>
      <div v-for="(question, index) in questions" :key="index" class="question">
        <div class="question-image-wrapper">
          <img :src="question.image" :alt="'Question ' + (index + 1)" class="question-image" />
        </div>
        <ul class="options">
          <li v-for="(option, i) in options" :key="i" class="option" >

              <input type="radio" :name="'q' + index" :value="option" v-model="question.answer" />
              <span class="option-text">{{ option }}</span>

          </li>
        </ul>
      </div>
      <button @click="submitAnswer" class="submit-button">提交答案</button>
    </div>
  </template>
  
<script>
  import axios from "axios";
  export default {
    data() {
      return {
        examTitle: '学生答题页面',
        questions: [
          {
            id: 1,
            question: '选出下列词语中不符合颜色搭配的一项：',
            image: '',
            answer: 'A',
          },
          {
            id: 2,
            question: '下列哪个单词的意思与其他三项不同?',
            image: '',
            answer: 'A',
          },
          {
            id: 3,
            question: '选出下列动词中不合适的一项：',
            image: '',
            answer: 'A',
          },
        ],
        options: ['A', 'B', 'C', 'D'],
        exams:'a',
        selected_exam:'have not selected'
      };
    },
    mounted() {
      const that=this;
      let Base64 = require('js-base64').Base64;
        for(let i = 0; i < this.questions.length; i++){
          axios({
		        method: 'GET',
		        url: 'http://127.0.0.1:8084/question',
		      }).then(res=>{
            const {data,headers}=res;
            if(res.data==="success"){
              return;
            }
            this.questions[i].id=data.qid;
            //console.log(data.qimage);
              //  二进制格式
            let blob = this.dataURItoBlob(data.qimage);
            //new Blob(Base64.decode(data.qimage,{type:'image/jpeg'}))
            this.questions[i].image=window.URL.createObjectURL(blob)
		      });
        }
    },
    methods: {
      submitAnswer() {
        console.log(this.selected_exam);
        const that=this;
        axios({
		      method: 'POST',
		      url: 'http://127.0.0.1:8084/answer',
          data:{answers:this.questions,uid:this.$store.state.id,examid:that.$store.state.exam}
		    }).then(res=>{
          if(res.data=="success"){
            that.$message.success("提交成功");
            that.$router.push({ path: "/upload/index" });
          }
          else{
            that.$message.error("提交失败");
          }
		    });
      },
      dataURItoBlob(dataURI) {
                let byteString = window.atob(dataURI);
                let ab = new ArrayBuffer(byteString.length);
                let ia = new Uint8Array(ab);
                for (let i = 0; i < byteString.length; i++) {
                    ia[i] = byteString.charCodeAt(i)
                }
                return new Blob([ab], {type: "image/jpeg"})
      },
    },
  };
</script>
  
<style>
  .wrapper {
    max-width: 800px;

    padding: 20px 0px 0px 200px;
  }
  
  .title {
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 50px;
  }
  
  .question {
    margin-bottom: 50px;
  }
  
  .question-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  
  .question-image-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
  }
  
  .question-image {
    max-width: 100%;
  }
  
  .options {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .option {
    margin-left: 40px;
    display:inline
  }
  
  .option-text {
    margin-left: 10px;
  }
  
  .submit-button {
    display: block;
    margin: auto;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: bold;
    background-color: #27ae60;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
  }
  
  .submit-button:hover {
    background-color: #219653;
  }
</style>
  